<template>
  <div class="startPage" v-if="showDom">
    <span class="vant-text">{{times}}s</span>
    <span class="vans-button" @click="jump" v-if="jumpshow">skip</span>
    <van-swipe indicator-color="#e49829" :loop="false">
      <van-swipe-item v-for="(i,index) in list" :key="index">
        <img :src="i.img" alt srcset />
      </van-swipe-item>
    </van-swipe>
  </div>
</template>
<script type="text/ecmascript-6">
import { getbanner, checksoftversion } from "../../api/sort.js";
import { appbb } from "../../assets/js/appConfig";
export default {
  data() {
    return {
      list: [],
      jumpshow: true,
      times: 5,
      setInterval: null,
      showDom:false
    };
  },
  methods: {
    jump() {
      this.$store.dispatch("acstartPage");
      this.$router.push({ path: "/" });
    },
 
    setTime() {
      this.setInterval = setInterval(() => {
        this.times--;
        if (this.times <= 0) {
          clearInterval(this.setInterval);
          this.jump();
        }
      }, 1000);
    }
  },
  mounted() {
    let obj = { place: "guide" };
    getbanner(obj).then(res => {
       this.times=Number(res.data[0].time);
        if (this.times>0) {
            this.list = res.data;
            this.showDom=true
            this.setTime();
        } else {
            this.jump();
        }
    });
  },
  beforeDestroy() {
    clearInterval(this.setInterval);
    this.setInterval = null;
  }
};
</script>

<style scoped lang="less">
.startPage {
  width: 100%;
  height: 100%;
  background: #ffffff;
  position: relative;
}
.van-swipe {
  width: 100%;
  height: 100%;
}
.vant-text {
  position: absolute;
  left: 0.4rem;
  top: 0.8rem;
  z-index: 2;
  line-height: 0.6rem;
  color: rgba(228, 152, 41, 1);
}
.vans-button {
  display: inline-block;
  padding: 0 0.25rem;
  height: 0.6rem;
  line-height: 0.56rem;
  text-align: center;
  border-radius: 0.08rem;
  border: 0.02rem solid rgba(228, 152, 41, 1);
  color: rgba(228, 152, 41, 1);
  position: absolute;
  right: 0.4rem;
  top: 0.8rem;
  z-index: 2;
}
.van-swipe__indicator {
  width: 6px;
  height: 6px;
  background-color: #4286ea;
  border-radius: 100%;
  opacity: 0.3;
  -webkit-transition: opacity 0.2s;
  transition: opacity 0.2s;
}
</style>
